<template>
    <!-- <div class="content-channel">
        <div>全部</div>
        <div>助理</div>
        <div>助理群</div>
    </div> -->
    <div class="header">
        <div class="input">
            <el-input v-model="input" placeholder="Please input" clearable />
        </div>

        <div class="add">
            <el-icon>
                <Plus />
            </el-icon>
        </div>
    </div>
    <el-scrollbar class="dataset-list">

        <div v-for="pipeline in pipelineList" class="dataset-list-item" @click="handleClick(pipeline)">
            <div class="dataset-name">{{ pipeline.name }}</div>
            <div class="dataset-describe">{{ pipeline.describe }}</div>
            <div class="dataset-info">
                <div class="dataset-created">{{ pipeline.created }}</div>
                <div class="dataset-user">{{ pipeline.username }}</div>
                <!-- <el-button type="primary" @click.stop="chat(pipeline)">试用</el-button> -->
            </div>
        </div>
        <div class="super-editor-flex new-pipeline" @click="newPipeline">
            <div class="add">
                <el-icon>
                    <Plus />
                </el-icon>
            </div>

            <div>新建任务流</div>
        </div>
    </el-scrollbar>
</template>

<script setup>
import { ref, inject } from 'vue'
import { getPlugins } from '@/api/plugin'
import { getPipelines } from '@/api/pipeline'
import { emitter } from '@/global.js';
const pipelineList = ref([])
const input = ref('')
getPipelines().then((result) => {
    // console.log(result);
    pipelineList.value = result
})

const userAction = inject('userAction')
const handleClick = (pipeline) => {
    userAction(pipeline, 'detail')
}
const chat = (pipeline) => {
    userAction(pipeline, 'chat')
}

const newPipeline = () => {
    console.log('newPipeline');
    $Bus.$Bus.emit('newPipeline')
    userAction(null, 'edit')
}

</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input {
    width: 90%;
}

.new-pipeline{
    cursor: pointer;
    height: 40px;
    border: 1px solid #ECEEF5;
    margin: 5px;
    border-radius: 5px;
}
.new-pipeline:hover{
    background-color: #ECEEF5;
    border: 1px solid pink;
}
.add {
    width: 40px;
    text-align: center;
    line-height: 40px;
}

.content-channel {
    display: flex;
    /* border: 1px solid  #ECEEF5; */
    justify-content: space-between;
    align-items: center;
    height: var(--supereditor-header-height);
    /* width: 300px; */
    /* width: 300px; */
}

.content-channel :nth-child(n) {
    border-right: solid 1px #ECEEF5;
    text-align: center;
    width: 300px;
    height: var(--supereditor-header-height);
    line-height: var(--supereditor-header-height);
}

.dataset-list {
    height: calc(100vh - 90px);
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid #ECEEF5;
}

.dataset-list-item {
    border: 1px solid #ECEEF5;
    padding: 10px 10px 5px 10px;
}

.dataset-list-item:hover {
    background-color: #B3D7FF;
}


.dataset-name {
    font-size: 16px;
}

.dataset-describe {
    font-size: 14px;
    padding: 5px 0;
}

.dataset-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
</style>